<template>
   <page-model
  :title="pageName"
  >
      <div class="selectionBox">
        <p class="documentName">视频名称</p>
        <el-input v-model="documentName" clearable></el-input>
        <div class="selectDocument" @click="selectDocument">查询</div>
        <div class="reset" @click="reset">重置</div>
      </div>
    <div class="mainBox">
      <header>
        <div class="uploadData" @click="uploadDocList">添加</div>
      </header>
      <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <th>序号</th>
          <th>视频名称</th>
          <th>视频描述</th>
          <th>上传时间</th>
          <th>操作</th>
        </thead>
        <tbody v-if="tableData.length > 0">
          <tr v-for="(item, index) in tableData" :key="item.modelId">
            <td>{{index>= 9 ? index+1 : '0'+ (index + 1)}}</td>
            <td>{{ item.modelTitle }}</td>
            <td>{{item.modelDescribe}}</td>
            <td>{{item.createTime}}</td>
            <td>
              <span @click="viewDoc(item)">查看</span>
              <span @click="uploadDoc(item)">下载</span>
              <span @click="writeDoc(item)">编辑</span>
              <span @click="deleteDoc(item)">删除</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="block" v-if="count">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <el-drawer
        :visible.sync="drawer"
        :show-close='false'
        >
        <div class="readDrawer">
            <p class="title">视频信息</p>
            <div class="content">
              <p class="name">
                视频名称：<span>{{drawerData.modelTitle}}</span>
              </p>
              <p class="name mt-30">
                视频描述：<span>{{drawerData.modelDescribe?drawerData.modelDescribe:'无'}}</span>
              </p>
            </div>
            <div class="media">
              <div class="picture">
                <img :src="drawerData.modelImg" alt="">
              </div>
              <div class="video mt-30">
                <video :src="drawerData.modelUrl" @click="openVideo(drawerData.modelUrl)" controls></video>
              </div>
            </div>
        </div>
      </el-drawer>
      <!-- 当表头为空时 -->
      <div class="empty" v-if="!count">
        <img src="@/assets/scene/empty.png" alt class="emptyLogo" />
        <span>空空如也</span>
      </div>
    </div>
  <delete-alert-box
  v-if="isDelete"
  :isDelete=isDelete
  :descTips=descTips
  @Confirm=Confirm
  @Cancel=Cancel
  ></delete-alert-box>
  </page-model>
</template>
<script>
import { mapState } from 'vuex'
// import { uploadData } from '@/api/documentModule'
import { uploadModel } from '@/api/innerProject/spectrumScan'
// // console.log(require)
export default {
  data () {
    return {
      pageName: '基坑扫描',
      // 当前页
      currentPage: +'',
      // 分页
      drawer: false,
      total: +'',
      index: 1,
      pageSize: 10,
      // 选择类目
      documentName: '',
      drawerData: {
        modelTitle: '',
        modelDescribe: '',
        modelImg: '',
        videoUrl: ''
      },
      descTips: [],
      isDelete: false,
      ids: []
    }
  },
  computed: {
    ...mapState('spectrumScan', ['tableData', 'count'])
  },
  methods: {
    openVideo (src) {
      // this.$store.commit('set_videoSrc', src)
    },
    handleCurrentChange (val) {
      // // console.log(val)
      this.index = val
      this.getDataList()
    },
    // 展示列表
    getDataList () {
      const params = {
        pageSize: this.pageSize,
        modelTitle: this.documentName,
        pageNum: this.index
      }
      this.$store.dispatch('spectrumScan/getModelData', params).then(res => {
        // console.log(this.tableData)
      })
    },
    // 预览文档
    async viewDoc (item) {
      this.drawer = true
      if (Number(item.modelImg) || Number(item.modelUrl)) {
        item.modelImg = await this.$_makeMediaSrc(item.modelImg)
        this.drawerData = item
        item.modelUrl = await this.$_makeMediaSrc(item.modelUrl)
      }
      this.drawerData = item
      // console.log('查看')
    },
    // 下载静态资源
    async uploadDoc (item) {
      const res = await uploadModel(item.modelId)
      // console.log(res)
      this.$_uploadBlobFileLine(res.data, item.modelTitle, 'video/mp4')
    },
    // 编辑文档
    writeDoc (item) {
      this.$router.push('/addBaseHoleScan')
      sessionStorage.setItem('modelId', item.modelId)
    },
    // 删除文档
    deleteDoc (item) {
      this.isDelete = true
      this.id = item.modelId
      this.descTips = [{
        tips: `确定删除"${item.modelTitle}"？`,
        default: ''
      }]
    },
    Confirm () {
      // console.log('确定')
      this.$store.dispatch('spectrumScan/removeModelData', this.id).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 500
          })
          this.isDelete = false
          this.getDataList()
        } else {
          this.$message({
            type: 'error',
            message: res.data.message,
            duration: 1000
          })
        }
      })
    },
    Cancel () {
      this.isDelete = false
      // console.log('取消')
    },
    // 查询相关文档
    selectDocument () {
      this.getDataList()
    },
    // 重置文档
    reset () {
      this.documentName = ''
      this.getDataList()
    },
    // 控制更新盒子隐藏
    uploadDocList () {
      sessionStorage.removeItem('modelId')
      this.$router.push('/addBaseHoleScan')
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/clickBox.scss";
@import "@/styles/dataModule.scss";
  .mainBox{
    // margin-bottom: 30px;
    min-height: calc(100% - 198px);
  }
  .selectionBox .Correlation .el-select{
    left: 186px;
  }
  .selectionBox .documentName{
    left:30px;
  }
  .selectionBox .el-input{
    left: 100px;
  }
  .selectionBox .selectDocument{
    left: 380px;
  }
  .selectionBox .reset{
    left: 480px;
  }
  ::v-deep .el-drawer__header{
  padding: 0;
  margin-bottom: 57px;
  }
  ::v-deep .el-drawer__open .el-drawer.rtl{
    width: 40% !important;
  }
  ::v-deep .el-drawer__body .readDrawer{
    .title{
      height:48px;
      padding-left: 24px;
      line-height: 48px;
      background:rgba(87,131,255,0.05);
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
    .content{
      padding-left: 110px;
      padding-top: 48px;
      height: 190px;
      .name{
        height:22px;
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:22px;
        span{
          width:346px;
          font-size:16px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
        }
      }
    }
    .media{
      .picture,.video{
        height: 300px;
        width: 81.24%;
        margin: 0 auto;
        img,video{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
